<!--
 * @file 设备管理面板组件
 * @description 用于显示设备列表和选择功能
 * @date 2024-04-01
 -->
<template>
  <view class="device-panel">
    <!-- 设备列表 -->
    <view class="device-list">
      <view 
        v-for="device in deviceList" 
        :key="device.deviceId"
        class="device-item"
        :class="{ 'device-item--selected': selectedDeviceId === device.deviceId }"
        @click="handleSelectDevice(device)"
      >
        <text class="iconfont icon-car"></text>
        <text class="device-id">{{ device.deviceId }}</text>
        <text class="device-status">
          {{ isDeviceOnline(device) ? '在线' : '离线' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { DeviceInfo } from '@/api/track';
import { isDeviceOnline } from '@/utils/device';

// 定义组件属性
interface Props {
  deviceList: DeviceInfo[];
  selectedDeviceId: string;
}

const props = withDefaults(defineProps<Props>(), {
  deviceList: () => [],
  selectedDeviceId: ''
});

// 定义事件 - 使用函数调用签名
const emit = defineEmits<{
  (e: 'select', device: DeviceInfo): void;
}>();

// 方法
function handleSelectDevice(device: DeviceInfo): void {
  // 如果点击的是当前已选中的设备，就取消选中（发送空deviceId）
  if (props.selectedDeviceId === device.deviceId) {
    emit('select', { ...device, deviceId: '' });
  } else {
    // 否则选中该设备
    emit('select', device);
  }
}
</script>

<style lang="scss" scoped>
.device-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  
  .device-list {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    max-height: 300px; // 设置最大高度，确保可以滚动
    
    .device-item {
      display: flex;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      
      &:hover {
        background-color: #f5f5f5;
      }
      
      &--selected {
        background-color: rgba(0, 170, 255, 0.1);
        border-left: 3px solid #00aaff;
      }
      
      .icon-car {
        font-size: 18px;
        color: #999;
        margin-right: 8px;
      }
      
      .device-id {
        flex: 1;
        font-size: 14px;
        color: #333;
      }
      
      .device-status {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style> 